<template>
  <div class="container">
    <div class="index-title">{{ routeQuery.name }}</div>
    <el-row class="" style="margin-bottom: 20px">
      <el-col :span="16" align="left">
        <el-input
          v-model="searchFrom.planName"
          placeholder="计划名称"
          style="width: 150px; margin-right: 15px"
          @change="search"
          clearable
        />
        <el-button class="ordinary" @click="search()">搜索</el-button>
      </el-col>
      <el-col :span="8" align="right">
        <el-button class="ordinary" @click="getExportBtn()" v-limit="'KHGL:KJKH:ZZKJKH:BDWJH:EXPORT'">批量导出</el-button>
        <el-button type="primary" @click="btnComfirm(1)"  v-limit="'KHGL:KJKH:ZZKJKH:BDWJH:CRPLAN'">确认/驳回计划</el-button>
      </el-col>
    </el-row>
    <div>
      <el-table
        :data="state.table_list"
        style="width: 100%"
        v-loading="state.table_loading"
        @selection-change="selectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
          :reserve-selection="false"
        />
        <el-table-column type="index" :index="indexMethod" align="center" width="80" label="序号" />
        <el-table-column prop="name" align="center" width="200" label="计划名称" />
        <el-table-column prop="age" align="center" label="年度" />
        <el-table-column prop="companyName" align="center" width="200" label="公司名称" />
        <el-table-column prop="indexCounts" align="center" label="指标数量" />
        <el-table-column prop="examineFactor" align="center" label="考核系数">
        </el-table-column>
        <el-table-column prop="planTotalScore" align="center" label="计划总得分">
        </el-table-column>
        <el-table-column prop="ensureFeedback" align="center" label="确认反馈" />
        <el-table-column prop="createUsername" align="center" label="创建人" width="80" />
        <el-table-column prop="createTime" align="center" label="创建时间" width="150" />
        <el-table-column
          prop="ensurePeopleUsername"
          align="center"
          label="确认人"
          width="80"
        />
        <el-table-column
          prop="ensureDatetime"
          align="center"
          label="确认时间"
          width="150"
        />
        <el-table-column prop="status_text" align="center" label="状态" width="100" />
        <el-table-column prop="address" align="center" fixed="right" label="操作" width="120">
          <template #default="scope">
            <span>
              <el-button type="primary" @click="goPlanDetail(scope.row)" v-limit="'KHGL:KJKH:ZZKJKH:BDWJH:PLANDETAIL'">查看</el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 20px"
        :total="pageOption.total"
        :page-size="pageOption.size"
        :current-page="pageOption.current"
        @current-change="currentChange"
        layout="total, prev, pager, next, jumper"
        align="right"
      ></el-pagination>
    </div>
    <el-dialog v-model="state.confirmPlanVisible" title="确认计划" width="500px">
      <div class="examine-dialog-content">
        <el-form :model="myForm" ref="ruleFormRef" :rules="rules" label-width="90px">
          <el-form-item label="目标计划:" prop="name">
            {{ myForm.name }}
          </el-form-item>
          <el-form-item label="确认结果:" prop="status">
            <el-radio-group v-model="myForm.status">
              <el-radio label="1" size="large">确认</el-radio>
              <el-radio label="2" size="large">驳回</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="反馈：" prop="feedback">
            <el-input
              v-model="myForm.feedback"
              :rows="2"
              type="textarea"
              style="width: 300px"
              placeholder="反馈"
              :maxlength="255" show-word-limit clearable
            />
            <!-- <el-input v-model="myForm.feedback" style="width: 300px"></el-input> -->
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.confirmPlanVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmPlan"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import pubFc from "@/views/examineManage/utils";
import {ElMessage, ElMessageBox} from "element-plus";
import { nextTick, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import * as api from "../../../api/zJexaminePlan";
interface Cdata {
  [propName: string]: any;
}
const searchFrom = reactive({
  //查询
  planName: "",
});
// const refreshPage:any=inject('refreshPage', Function, true);
const route = useRoute();
const router = useRouter();
const routeQuery = route.query;
// let annualId=route.query.id;
const pageOption = reactive({
  total: 0,
  current: 1,
  size: 10,
});
const ruleFormRef = ref<any>();
const rules = reactive<any>({
  //   parentNumber: [{ required: true, message: '请选择父级', trigger: 'blur' }],
  status: [{ required: true, message: "请选择确认结果", trigger: "change" }],
  feedback: [{ required: true, message: "请填写反馈", trigger: "blur" }],
});
const myForm = reactive({
  name: "",
  status: "",
  feedback: "",
  id: "",
});
let state = reactive<Cdata>({
  table_list: [],
  opType: "add", //add,edit,copy
  handleRowData: null, //正在处理的行数据
  table_loading: false,
  confirmPlanVisible: false,
  company_list: [],
});
const dictDatas = reactive({}); //字典值
let selectedRows = ref<any>([]);
const search = () => {
  //搜索
  pageOption.current = 1;
  gettargetlist();
};

const getExportBtn = () => {
  ElMessageBox.confirm("确定要批量导出吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    //批量导出
    api
      .exportSelfExRequest({
        current: pageOption.current,
        size: pageOption.size,
        ...searchFrom,
        examineFlag: false,
      })
      .then((res) => {
        const { data, headers } = res;
        pubFc.downloadFunc(data, headers);
      });
  });
};
const goPlanDetail = (row) => {
  //进入计划详情
  router.push({
    path: "/examineManage/techExamine/zzExamine/sPlanDetail",
    query: {
      id: row.id,
      name: `${row.name}-${row.companyName}`,
    },
  });
};
const indexMethod = (index)=>{
  return pageOption.size*(pageOption.current-1) +index+1
}
const selectionChange = (arr) => {
  //选中
  selectedRows.value = arr;
};
const currentChange = (page) => {
  //翻页
  pageOption.current = page;
  gettargetlist();
};
const btnComfirm = (type) => {
  if (selectedRows.value.length !== 1) {
    ElMessage({
      message: "请选择一条数据！",
      type: "warning",
    });
  } else {
    state.confirmPlanVisible = true;
    nextTick(() => {
      ruleFormRef.value?.resetFields();
      myForm.id = selectedRows.value[0].id;
      myForm.name = selectedRows.value[0].name;
    });
  }
};

const confirmPlan = () => {
  //确认或驳回计划
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      api.ensureAndRejectRequest({ ...myForm }).then((res) => {
        if (res.data.code == 200) {
          ElMessage.success(myForm.status == "1" ? "已确认" : "已驳回");
          state.confirmPlanVisible = false;
          gettargetlist();
        }
      });
    }
  });
};
const gettargetlist = () => {
  //获取table列表
  state.table_loading = true;
  api
    .pageLocalListRequest({
      ...searchFrom,
      current: pageOption.current,
      size: pageOption.size,
    })
    .then((res) => {
      state.table_loading = false;
      state.table_list = res.data.data.records;
      pageOption.total = res.data.data.total;
    });
};

gettargetlist();
</script>
<style lang="scss" scoped>
.container {
  background-color: white;
  padding: 20px;
  overflow-y: auto;
  .index-title {
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #e7e5e5;
    margin-bottom: 10px;
    font-size: 26px;
  }
}
.examine-dialog-content {
  padding: 20px;
}
:deep(.el-dialog__body) {
  padding: 0;
}
:deep(.el-dialog__header) {
  border-bottom: 1px solid #f1eded;
}
</style>
